<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <!-- 
            在项目开发的时候，尽量减少 DOM 操作，那么有些时候必须要操作 DOM 的时候
            可以使用 ref 来进行获取，ref 还可以用来标记一个组件。
         -->
        <input type="text" ref="myinp" placeholder="请输入你现在的想法">
        <button @click="btnClick">点击获取输入的内容</button>


        <ul>
            <li v-for="(item,index) in list" :key="index" ref="items"> {{item}} </li>
        </ul>

        <!-- 所有标签的属性，只要不是纯字符串，一定要加 :  -->
        <div :ref="refFn">你可以摆烂，但不能真的菜</div>
    </div>
</body>
<script>
    const app = {
        data() {
            return {
                list: ['张三', '李四', '王五', '赵六', '田七']
            }
        },
        methods: {
            btnClick() {
                // console.log('你输入的是：', document.querySelector('input').value);

                console.log('你输入的是：', this.$refs.myinp.value);

                console.log(this.$refs.items);
            },
            refFn(el) {
                // 我们可以将 ref 的值设置为一个函数，此时我们函数中有一个参数 el
                // 这个 el 就是我们绑定的元素
                console.log(el);
            }
        },
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>

<!-- 
    组件的最小单位是一个 html 标签
    多个小组件可以组合成一个大一些的组件
    多个大组件可以合成一个更大的组件
    更大组件可以合成一个页面
    多个页面可以成为一个应用程序


    作业：
    删除功能
    发送验证码按钮功能
 -->